<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>flying tab menu with html css3 </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background-color: #fb527a;
            font-family: tahoma;
            overflow: hidden;
        }

        h1 {
            margin: 0;
            font-size: 22px;
            line-height: 1;
            color: #423e37;
        }

        .page {
            width: 100vw;
            height: 100vh;
            min-height: 700px;
            overflow: hidden;
            margin-left: -25px;
            margin-top: 45px;
        }


        .tabs-controls {
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: stretch;
            width: 100%;
            max-width: 800%;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 50px 0 100px;
            list-style: none;
        }

        .tabs-controls-link {
            position: relative;
            display: block;
            padding: 15px 32px;
            font-size: 18px;
            font-weight: 400;
            color: white;
            text-transform: uppercase;
            text-decoration: none;
        }

        .tabs-controls-link::after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            width: 0;
            height: 4px;
            background-color: white;
            border-radius: 2px;
            margin: auto;
            content: '';
            transition: width 0.4s;
        }

        .tabs-controls-link-active:after {
            width: 100%;
        }

        .cards-container {
            position: relative;
            z-index: 1;
            width: 500px;
            height: calc(100vh - 205px);
            margin: 0 auto;
        }

        .card {
            position: absolute;
            width: 500px;
            height: 300px;
            background-color: #edebd7;
            border: 1px solid #333;
            box-shadow: 9px 11px 3px 0px rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            padding: 40px;
            transition: transform 0.3s, opacity 0.2s;
        }

        .card.hidden {
            z-index: 100;
            background-color: white;
            color: white;
            opacity: 0;
            transition: color 0.5s, abckground-color 0.5s, transform 1s, opacity 0.2s 0.4s;
        }

        .card.hidden h1 {
            color: white;
            transition: color 0.5s;
        }


        .card.hidden:nth-of-type(1) {
            transform: rotate(-71deg) translateX(101%) translateY(-42%) scale(0.7) skewX(3deg) skewY(5deg);
        }

        .card.hidden:nth-of-type(2) {
            transform: rotate(-20deg) translateX(101%) translateY(-30%) scale(0.7) skewX(7deg) skewY(12deg);
        }

        .card.hidden:nth-of-type(3) {
            transform: rotate(-89deg) translateX(101%) translateY(-41%) scale(1) skewX(4deg) skewY(1deg);
        }

        .card.hidden:nth-of-type(4) {
            transform: rotate(-88deg) translateX(101%) translateY(-27%) scale(0.5) skewX(9deg) skewY(11deg);
        }

        .card.hidden:nth-of-type(5) {
            transform: rotate(-80deg) translateX(101%) translateY(-40%) scale(0.7) skewX(12deg) skewY(5deg);
        }

        .card.hidden:nth-of-type(6) {
            transform: rotate(-85deg) translateX(101%) translateY(-21%) scale(0.3) skewX(12deg) skewY(7deg);
        }

        .card:nth-of-type(1) {
            z-index: 5;
            transform: translateX(0) translateY(0);
        }

        .card:nth-of-type(2) {
            z-index: 4;
            transform: translateX(10px) translateY(10px);
        }

        .card:nth-of-type(3) {
            z-index: 3;
            transform: translateX(20px) translateY(20px);
        }

        .card:nth-of-type(4) {
            z-index: 2;
            transform: translateX(30px) translateY(30px);
        }

        .card:nth-of-type(5) {
            z-index: 1;
            transform: translateX(40px) translateY(40px);
        }

        .card:nth-of-type(6) {
            z-index: 0;
            transform: translateX(50px) translateY(50px);
        }




        .social .fa {
            background: hotpink;
            width: 35px;
            height: 35px;
            color: white;
            text-align: center;
            line-height: 35px;
            margin-top: 20px;
        }
    </style>
</head>

<body>

    <section class="page">
        <section>
            <ul class="tabs-controls">

                <li class="tabs-controlsitem">
                    <a herf="" class="tabs-controls-link tabs-controls-link-active" data-id="1">Home</a>
                </li>



                <li class="tabs-controlsitem">
                    <a herf="" class="tabs-controls-link " data-id="2">Gallery</a>
                </li>

                <li class="tabs-controlsitem">
                    <a herf="" class="tabs-controls-link " data-id="3">Team</a>
                </li>

                <li class="tabs-controlsitem">
                    <a herf="" class="tabs-controls-link " data-id="4">Testimonial</a>
                </li>

                <li class="tabs-controlsitem">
                    <a herf="" class="tabs-controls-link " data-id="5">Faq</a>
                </li>

                <li class="tabs-controlsitem">
                    <a herf="" class="tabs-controls-link " data-id="6">Locations</a>
                </li>


            </ul>
        </section>

        <section class="cards-container">
            <div class="card card-current" id="1">
                <h1>HOME</h1>
                <br>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores at tenetur vel illum tempora dicta
                    accusantium iusto praesentium fugit obcaecati! Ut doloremque iure ipsam nemo expedita maiores rerum
                    veritatis quibusdam!
                </p>
                <div class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-youtube"></i>
                </div>
            </div>



            <div class="card" id="2">
                <h1>GALLERY</h1>
                <br>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores at tenetur vel illum tempora dicta
                    accusantium iusto praesentium fugit obcaecati! Ut doloremque iure ipsam nemo expedita maiores rerum
                    veritatis quibusdam!
                </p>
                <div class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-youtube"></i>
                </div>
            </div>

            <div class="card" id="3">
                <h1>TEAM</h1>
                <br>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores at tenetur vel illum tempora dicta
                    accusantium iusto praesentium fugit obcaecati! Ut doloremque iure ipsam nemo expedita maiores rerum
                    veritatis quibusdam!
                </p>
                <div class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-youtube"></i>
                </div>
            </div>

            <div class="card" id="4">
                <h1>TESTIMONIAL</h1>
                <br>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores at tenetur vel illum tempora dicta
                    accusantium iusto praesentium fugit obcaecati! Ut doloremque iure ipsam nemo expedita maiores rerum
                    veritatis quibusdam!
                </p>
                <div class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-youtube"></i>
                </div>
            </div>

            <div class="card " id="5">
                <h1>FAQ</h1>
                <br>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores at tenetur vel illum tempora dicta
                    accusantium iusto praesentium fugit obcaecati! Ut doloremque iure ipsam nemo expedita maiores rerum
                    veritatis quibusdam!
                </p>
                <div class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-youtube"></i>
                </div>
            </div>

            <div class="card" id="6">
                <h1>LOCATIONS</h1>
                <br>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores at tenetur vel illum tempora dicta
                    accusantium iusto praesentium fugit obcaecati! Ut doloremque iure ipsam nemo expedita maiores rerum
                    veritatis quibusdam!
                </p>
                <div class="social">
                    <i class="fa fa-facebook"></i>
                    <i class="fa fa-twitter"></i>
                    <i class="fa fa-linkedin"></i>
                    <i class="fa fa-youtube"></i>
                </div>
            </div>


        </section>






    </section>
</body>

</html>